<script setup lang="ts">
import { UnwrapRef } from "vue";
import { Guide } from "@element-plus/icons-vue";

// 组件接口
const props = defineProps({
  inputTips: {
    type: String,
    required: false,
    default: "提示输入信息...",
  },
  onClickEvent: {
    type: Function as () => void | Function,
    required: false,
  },
  btnName: {
    type: String,
    required: false,
    default: "分词",
  },
  btnIcon: {
    type: null,
    required: false,
    default: Guide,
  },
  loading: {
    type: Boolean,
    required: false,
    default: false,
  },
});

// 变量
const svg = `
        <path class="path" d="
          M 30 15
          L 28 17
          M 25.61 25.61
          A 15 15, 0, 0, 1, 15 30
          A 15 15, 0, 1, 1, 27.99 7.5
          L 15 15
        " style="stroke-width: 4px; fill: rgba(0, 0, 0, 0)"/>
      `;

// 响应式变量
let address: Ref<UnwrapRef<string>>;
address = ref("");

// 事件
// 双向绑定事件
const emit = defineEmits(["update:value"]);

// 双向绑定
const onInput = () => {
  emit("update:value", address.value);
};

// 暴露model属性以支持v-model
defineExpose({
  model: {
    prop: "value",
    event: "update:value",
  },
});
</script>

<template>
  <el-input
    v-model="address"
    @input="onInput"
    v-loading="loading"
    element-loading-text="Loading..."
    :element-loading-spinner="svg"
    element-loading-svg-view-box="-10, -10, 50, 50"
    element-loading-background="rgba(122, 122, 122, 0.8)"
    :placeholder="props.inputTips"
    class="input-with-select"
    @keydown.native.enter="props.onClickEvent"
  >
    <template #append>
      <el-button
        :icon="props.btnIcon"
        class="Contents_btn1"
        type="primary"
        round
        @click="props.onClickEvent"
        >{{ props.btnName }}</el-button
      >
    </template>
  </el-input>
</template>

<style scoped>
.input-with-select {
  height: 85%;
}

.input-with-select .el-input-group__prepend {
  background-color: var(--el-fill-color-darker);
}
</style>
